<template>
  <div style="margin:auto 0">

    <el-container>
      <el-header style="width: 1500px;height: 45px;background: red;border-radius: 10px;position: relative">
        <span
            style="margin-left: 600px;position: absolute;margin-top: 14px;font-size: 10px;font-weight: bolder">首页</span>
        <i class="el-icon-s-flag" style="position: absolute;margin-left: 625px;margin-top: 15px"></i>
        <i class="el-icon-s-flag" style="position: absolute;margin-left: 640px;margin-top: 15px"></i>
        <span style="font-size:10px;color: #8c939d;position: absolute;margin-left: 660px;margin-top: 14px">物资信息</span>
      </el-header>
      <el-main>
        <span style="font-size: 8px;margin-left:580px ">物资名称</span>
        <input type="text" placeholder="物资名称" style="width: 130px;height: 18px;margin-left: 10px;">
        <i class="el-icon-search" style="font-size: 10px;margin-left: -20px" @click="info()"></i>
        <el-button id="button-01">
          <i class="el-icon-search" id="icon-01"></i>
          <span>查询</span>
        </el-button>
        <div>
          <el-table
              :data="tableData"
              style="width: 1171px"
              border
              ref="multipleTable">
            <el-table-column
                prop="date"
                type="selection"
                width="40"
                align="center"
            >
            </el-table-column>
            <el-table-column
                prop="index"
                label="索引"
                width="50">
            </el-table-column>
            <el-table-column
                prop="address"
                label="物资编号"
                sortable
                width="280"
                higth="20"
            >
            </el-table-column>
            <el-table-column
                prop="name"
                label="物资名称"
                sortable
                width="280"
            >
            </el-table-column>
            <el-table-column
                prop="time"
                label="发布时间"
                sortable
                width="280">
            </el-table-column>

            <el-table-column
                id="add"
                prop="date"
                label="图片"
                sortable
                width="140">
                  <template slot-scope="scope">
<!--                    scope.row代表当前遍历的数组中的对象-->
                    <img :src="scope.row.url" width="50" alt="">
                  </template>
            </el-table-column>
            <el-table-column
                prop="details"
                label="操作"
                width="100">
              <template slot-scope="scope">
                <el-button
                    @click.native.prevent="deleteRow(scope.$index, tableData)"
                    type="text"
                    size="small">
                  移除
                </el-button>
              </template>
            </el-table-column>
          </el-table>
        </div>
      </el-main>
    </el-container>


  </div>
</template>
<script>
export default {
  data() {
    return {
     tableData: [{
        index: '1',
       url:'../../eva2.jpg',
        name: '物资名称1',
        address: '物资编号1',
        time: '2021-04-12 17:04:35'
      }, {
        index: '2',
       url:'../../favicon.ico',
        name: '物资名称2',
        address: '物资编号2',
        time: '2021-04-12 17:04:35'
      }, {
        index: '3',
        url:'../../favicon.ico',
        name: '物资名称3',
        address: '物资编号3',
        time: '2021-04-12 17:04:35'
      }, {
        index: '4',
       url:'../../favicon.ico',
        name: '物资名称4',
        address: '物资编号4',
        time: '2021-04-12 17:04:35'
      }, {
        index: '5',
       url:'../../favicon.ico',
        name: '物资名称5',
        address: '物资编号5',
        time: '2021-04-12 17:04:35'
      }, {
        index: '6',
       url:'../../favicon.ico',
        name: '物资名称6',
        address: '物资编号6',
        time: '2021-04-12 17:04:35'
      }]
    }
  }
}
</script>

<style>
#button-01 {
  width: 80px;
  height: 30px;
  margin-left: 35px;
  position: relative;
  margin-top: -1px;
  line-height: 6px;
}

#icon-01 {
  font-size: 10px;
  position: absolute;
  left: 10px;
  top: 8px;
}


input {
  border-radius: 10px;
  border: 1px solid #8c939d;
}
.el-table .el-table__cell {
  padding: 12px 0;
  min-width: 0;
  box-sizing: border-box;
  text-overflow: ellipsis;
  vertical-align: middle;
  position: relative;
  text-align: center;
}
</style>
